<template>
  <a-drawer v-model:visible="visible" :title="model.id ? '门闸详情' : '门闸新增'" placement="right" :width="450">
    <a-form ref="formRef" :model="model" :rules="rules" :label-col="{ span: 7 }" @finish="onFinish">
      <a-form-item label="门闸名称" name="entranceName">
        <a-input v-model:value="model.entranceName" allowClear placeholder="门闸名称" :disabled="isDisabled" />
      </a-form-item>
      <a-form-item label="门闸编码" name="entranceCode">
        <a-input v-model:value="model.entranceCode" allowClear placeholder="门闸编码" :disabled="isDisabled" />
      </a-form-item>
      <a-form-item label="站点" name="stationCode">
        <a-select v-model:value="model.stationCode" allowClear placeholder="请选择站点" :disabled="isDisabled">
          <template v-for="(item, index) in stationList" :key="index">
            <a-select-option :value="item.stationCode">
              {{ item.name }}
            </a-select-option>
          </template>
        </a-select>
      </a-form-item>
      <a-form-item label="门闸状态" name="entranceState">
        <a-select v-model:value="model.entranceState" allowClear placeholder="" :disabled="true">
          <template
            v-for="(item, index) in [
              { value: 0, label: '关' },
              { value: 1, label: '开' },
            ]"
            :key="index"
          >
            <a-select-option :value="item.value">
              {{ item.label }}
            </a-select-option>
          </template>
        </a-select>
      </a-form-item>
      <template v-if="!isDisabled">
        <a-form-item label="操作">
          <a-button @click="resetForm">重置</a-button>
          <a-divider type="vertical" />
          <a-button type="primary" html-type="submit">提交保存</a-button>
        </a-form-item>
      </template>
    </a-form>
    <CommonAMap ref="commonAMap" @oks="getMapData" />
  </a-drawer>
</template>

<script lang="ts">
import { watch, ref, nextTick, defineComponent, getCurrentInstance } from 'vue';
import { JDictSelectTag } from '/@/components/Form';
import { entranceInfoApi, entranceAddApi, entranceModifyApi } from '/@/api/gate';
import { projectListApi } from '@/api/project';
import CommonAMap from '/@/components/CommonAMap/index.vue';
import { useUserStore } from '/@/store/modules/user';
import { Empty, message } from 'ant-design-vue';
export default defineComponent({
  components: { JDictSelectTag, CommonAMap },
  props: {
    stationList: {
      type: Object,
      default: [],
    },
    userList: {
      type: Object,
      defalut: [],
    },
  },
  setup(props, { emit }) {
    const userStore = useUserStore();
    let { proxy } = getCurrentInstance();
    let visible = ref(false);
    let isDisabled = ref(false);
    let model = ref({
      entranceor: '',
      stationCode: '',
      entranceorTel: '',
      entranceorCount: '',
      entranceEmployee: '',
      entranceReason: '',
      licence: '',
    });
    let regionList = ref([]);
    let rules = ref({
      entranceor: [{ required: true, message: '请选择访客姓名' }],
      stationCode: [{ required: true, message: '请选择站点' }],
    });

    let projectList = ref([]);

    function getRegionData(data: []) {
      regionList.value = data;
    }

    /**
     * 初始化数据
     * @param {number} id
     */
    function init(id) {
      entranceInfoApi({ id }).then((res) => {
        res['state'] = res['state'] + '';
        res['alarmState'] = res['alarmState'] + '';
        model.value = { ...res };
      });
    }

    function resetForm() {
      proxy.$refs.formRef.resetFields();
    }

    /**
     * 初始化项目列表
     */
    function initProjectList() {
      projectListApi({}).then((res) => {
        projectList.value = res;
      });
    }

    function onFinish() {
      let data = {
        ...model.value,
      };
      if (!data['id']) {
        entranceAddApi(data).then((res) => {
          proxy.$refs.formRef.resetFields();
          visible.value = false;
          emit('oks');
        });
      } else {
        entranceModifyApi(data).then((res) => {
          proxy.$refs.formRef.resetFields();
          visible.value = false;
          emit('oks');
        });
      }
    }

    /**
     * 打开地图
     */
    function openMap() {
      proxy.$refs.commonAMap.visible = true;
      nextTick(() => {
        proxy.$refs.commonAMap.initMap(model.value);
      });
    }

    watch(
      () => visible.value,
      (v) => {
        if (v) {
          initProjectList();
        }
        if (!v) {
          model.value = {
            id: '',
            entranceor: '',
            stationCode: '',
            entranceorTel: '',
            entranceorCount: '',
            entranceEmployee: '',
            entranceReason: '',
            licence: '',
          };
          delete model.value.id;
        }
      },
      { deep: true }
    );

    /**
     * 获取地图返回的经纬度
     */
    function getMapData({ longitue, latitude }) {
      Object.assign(model.value, {
        longitue,
        latitude,
      });
      AMap.plugin('AMap.Geocoder', () => {
        new AMap.Geocoder().getAddress([longitue, latitude], (status, result) => {
          if (status === 'complete' && result.info === 'OK') {
            model.value.address = result.regeocode.formattedAddress;
          }
        });
      });
    }

    function showDrawer(data: {}, isCheck) {
      isDisabled.value = isCheck;
      visible.value = true;
      if (data) {
        model.value = data;
      }
    }

    return {
      init,
      visible,
      model,
      rules,
      projectList,
      regionList,
      isDisabled,
      resetForm,
      onFinish,
      openMap,
      getMapData,
      getRegionData,
      showDrawer,
    };
  },
});
</script>
